<template>
    <div class="alet">
        <div class="controls">
            <button @click="fullClient">全屏</button>
            <button @click="out">退出</button>
            <button>设置</button>
        </div>
        <div class="mark">
            <slot></slot>
        </div>
        <div class="cover" @click="next"></div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";
@Component({})
export default class Alert extends Vue {
  @Emit("editHandleEmit")
  private out() {
    return false;
  }
  private fullClient(){
      const sourcePlay = this.$store.state.crumbs.palyerObj
      sourcePlay.requestFullscreen()
  }
  private next():void{
    let index = this.$store.state.crumbs.playIndex
    if(index === this.$store.state.crumbs.playList.length - 1) index = 0
    else  index = index + 1
    this.$store.commit("crumbs/EDITINDEX", index);
    const playCurrentSrc = this.$store.state.crumbs.playList[index]
    this.$store.state.crumbs.palyerObj.src({src: playCurrentSrc, type: "video/mp4"})
  }
}
</script>

<style lang="less">
.alet{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    // justify-content: center;
    background: rgba(0, 0, 0, .7);
    .controls{
        position: fixed;
        top: 0;
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
    }
    .mark{
      width: 50%;
      height: auto;
    }
    .cover{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
}
</style>